<template>
	<view class="tixian">
		<view class="item margin30">
				<span>提现金额</span>
				<p>可提现额：$0.00</p>
			</view>
		<helang-checkbox class="margin30" ref="checkbox" @change="valueChange"></helang-checkbox>
		<view class="item margin30">
			<p>当前金额为</p>
			<span>{{number}}元</span>
		</view>
		<view class="uni-form-item uni-column margin30">
			<view class="title">输入金额（$）</view>
			<input class="uni-input" v-model="jine" type="digit" placeholder="输入金额" />
		</view>
		<view class="uni-form-item uni-column margin30">
		    <view class="title">借记卡卡号</view>
		    <input class="uni-input" type="number" v-model="cardNumber" placeholder="请输入借记卡号"/>
		</view>
		<view class="zhuyi margin30">
			<p>注意：</p>
			<p v-for="item in list" :key="item">
				{{item}}
			</p>
		</view>
		<view class="line"></view>
<!-- 		<view class="formData margin30">
			<view class="uni-form-item uni-column">
                <view class="title">姓名</view>
                <input class="uni-input" placeholder="请输入姓名"/>
            </view>
			<view class="uni-form-item uni-column">
                <view class="title">手机号码</view>
                <input class="uni-input" type="number" placeholder="请输入手机号"/>
            </view>
			<view class="uni-form-item uni-column">
                <view class="title">借记卡卡号</view>
                <input class="uni-input" type="number" placeholder="请输入借记卡号"/>
            </view>
		</view> -->
		<view class="box">
			<button class="btn" @click="chongzhi" type="primary">确定</button>
		</view>
	</view>
</template>

<script>
import helangCheckbox from "../../components/helang-checkbox/helang-checkbox.vue"
import { withdraw} from '../../server/api.js';
	export default {
		components:{
			"helang-checkbox":helangCheckbox
		},
		data() {
			return {
				number:720,
				jine:'',
				cardNumber : '',
				list:[
					'1.每日只能提现一次',
					'2.出金时间周一至周五9:00~16:00,T+0资金到达，节假日顺延',
					'3.出金手续费收取1%，入金24小时秒到',
					'4.请认真填写您的每一项提现信息',
				]
			};
		},
		mounted(){
			this.dataInit()
		},
		methods:{
			dataInit(){
				this.$refs.checkbox.set({
					type:'radio',   // 类型：单选框
					index:0,        // 默认选中的项
					column:3,       // 分列
					list:[          // 列表数据
						{text:'$100.00',num:100},
						{text:'$200.00',num:200},
						{text:'$500.00',num:500},
						{text:'$1000.00',num:1000},
						{text:'$10000.00',num:10000}
					]   
				});
			},
			valueChange(data){
				this.number = data.num * 7.2
				console.log(data)
			},
			chongzhi(){
				let chongzhi = ''
				if(this.jine){
					chongzhi = this.jine
				}else{
					chongzhi = this.number
				}
				let that = this
				uni.getStorage({
					key: 'UserInfo',
					success: function(user) {
						let userId = user.data.data[0].UserId;
						// console.log(userId)
						let params = {};
						params.user_id = userId 
						params.money = chongzhi;
						params.bank_code = that.cardNumber
						console.log(params)
						that.widthDraw(params)
					}
				});
			}, 
			widthDraw: async function(){
				let data = await withdraw();
				console.log(data)
				plus.nativeUI.toast(data.data.returnval);
			}
		}
	}
</script>

<style lang="less">
.tixian{
	.margin30{
		margin:0 30upx;
	}
	// padding: 30upx;
	.item{
		margin-bottom: 30upx;
		display: flex;
		justify-content:space-between;
		font-size: 30upx;
		line-height: 110upx;
		height: 110upx;
		// border-bottom: 1px solid #ddd;
		p{
			color: #999;
		}
		span{
			color: #333;
		}
	}
	.title{
		font-size: 28upx;
		line-height: 40upx;
		margin-bottom: 20upx;
	}
	.uni-input{
		font-size: 34upx;
	}
	.box{
		height: 200upx;
		.btn{
			margin-top: 60upx;
			font-size: 32upx;
		}
	}
	.zhuyi{
		padding-top: 30upx;
		font-size: 28upx;
		color: #999;
		line-height: 40upx;
	}
	.formData{
		width: 690upx;
		padding-top: 30upx;
		font-size: 30upx;
		color: #999;
		.uni-column{
			border-bottom: 1px solid #ccc;
			margin-top: 10upx;
		}
		input{
			font-size: 28upx;
			margin-bottom: 6upx;
		}
	}
}
</style>
